<template>
  <div class="app-user-rate">
    <div class="title">{{ rateTitle }}</div>
    <van-rate
      :size="25"
      class="app-mobile-rate"
      :allow-half="allowHalf"
      :count="3"
      :color="color"
      v-model="curValue"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Rate } from "vant";

Vue.use(Rate);
@Component({
  components: {},
})
export default class AppUserRate extends Vue {
  /**
   * 评分值
   *
   * @type {string}
   * @memberof AppUserRate
   */
  @Prop() public value?: string;

  /**
   * 允许半星
   *
   * @type {boolean}
   * @memberof AppUserRate
   */
  @Prop({ default: true }) public allowHalf?: boolean;

  /**
   * 选中颜色
   *
   * @type {string}
   * @memberof AppUserRate
   */
  @Prop({default:'#ffc51f'}) public color?: string;
  /**
   * 标题
   *
   * @type {string}
   * @memberof AppUserRate
   */
  @Prop() public rateTitle?: string ;

  /**
   * 获取输入的Value值
   *
   * @type {string}
   * @memberof AppUserRate
   */
  get curValue() {
    return Number(this.value);
  }

  /**
   * 根据curValue变化抛出事件change
   *
   * @type {string}
   * @memberof AppUserRate
   */
  set curValue(val: any) {
    this.$emit("change", val);
  }
}
</script>
<style lang="less">
.app-user-rate {
  width: 100%;
  height: 90px;
  text-align: center;
  border-top: 1px solid #e8e9ec;
  border-bottom: 1px solid #e8e9ec;
  padding: 15px;
  .title {
    font-size: 16px;
    font-weight: 600;
  }
  .app-mobile-rate.van-rate {
    height: 45px;
    align-items: center;
  }
  .van-rate__item:not(:last-child) {
    padding-right: 15px;
}
}
</style>